<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
        border: 1px solid #000;
        text-align: center;
        width: 600px;
    }

    th,
    td {
        border: 1px solid #000;
    }
</style>




<body>
    <div id="app">
        <p>欢迎光临_vue开发的收银系统</p>
        <table>
            <tr>
                <th>苹果 {{price}}￥/斤，折扣 <{{Discount}}折>
                </th>

            </tr>
            <tr>
                <td>请输入你要购买的斤数
                    <input type="number" v-model="num">
                </td>
            </tr>
            <tr>
                <td><button @click="count">结账买单</button>

                </td>
            </tr>
            <tr>
                <td>结账单:总价:{{total}} ￥元 折价后 :{{discount}} ￥元 省了:{{save}}￥元

                </td>
            </tr>
        </table>

        </table>

    </div>
    <script src="./vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                price: 10,
                Discount: 8,
                num: 0,
                total: 0,
                discount: 0,
                save: 0
            },
            methods: {
                count() {
                    this.total = this.price * this.num;
                    this.discount = this.total * this.Discount / 10;
                    this.save = this.total - this.discount;
                }
            }
        })
    </script>
</body>

</html>